<template>
    <div class="big">
        <!-- 导航栏 -->
        <div class="navigation">
            <span @click="back">
                <img src="../../assets/home-img/返回1.png" alt="">
            </span>
            <h3>复诊开方</h3>
            <span></span>
        </div>
        <!-- 通知栏 -->
        <div class="notice">
            <van-notice-bar left-icon="volume" wrapable :scrollable="false" text="不会回头的东西有四件：说出口的话、离弦的箭、逝去的生活和失去的机会。" />
        </div>
        <div class="empty">
            <img src="../../assets/home-img/复诊空状态.png" alt="">
            <span>暂无用药记录</span>
        </div>
        <!-- 文字 -->
        <div class="title">
            复诊开方只面向在平台开具用药记录的患者! 您可以先根据当前病情状况找到对应擅长的医生,
            订购其图文咨询服务,在问诊中医生将根据您的病情描述需要开具的用药建议! 后续若还有用药
            需求,就可以直接进入开药门诊申请复诊开方!
        </div>
        <!-- 知道 -->
         <div class="know">
            <span>知道怎么找医生</span>
            <button @click="toMore">立即问医生</button>
         </div>
         <!-- 不知道 -->
          <div class="unaware">
            <span>不知道怎么找医生</span>
            <button @click="toSynthesis">联系妙手客服</button>
          </div>
    </div>
</template>

<script setup>
import router from "@/router";
import { onMounted, ref } from "vue";

const back = () => {
    // router.push('/home');
    history.back();
}

// 知道
const toMore = () => {
    router.push('/more');
}

// 不知道
const toSynthesis = () => {
    router.push('/synthesis');
}

</script>

<style lang="scss" scoped>
.big {
    width: 100%;
    height: 100%;
    background-color: #fff;

    .navigation {
        width: 100%;
        height: 92px;
        display: flex;
        background-color: #fff;
        justify-content: space-around;
        align-items: center;

        h3 {
            flex: 1;
            text-align: center;
            font-size: 35px;
        }

        span {
            width: 40px;
            padding-top: 7px;

            img {
                width: 40px;
                height: 40px;
                margin: 0 10px;
            }
        }
    }

    .empty {
        width: 100%;
        margin-top: 180px;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;

        span {
            margin-top: 10px;
            letter-spacing: 2px;
            font-family: '微软雅黑';
        }
    }

    .title {
        width: 100%;
        padding: 0 30px;
        margin-top: 50px;
        text-indent: 25px;
        text-align: center;
        font-size: 26px;
        letter-spacing: 3px;
        color: #6d6d6d;
        font-weight: 550;
        font-family: '微软雅黑';
    }

    .know {
        width: 100%;
        margin-top: 60px;
        padding: 0 30px;
        display: flex;
        flex-direction: column;
        align-items: center;

        button {
            width: 100%;
            height: 70px;
            margin-top: 15px;
            border: 0;
            border-radius: 8px;
            color: #fff;
            background-color: #00b487;
            letter-spacing: 3px;
        }
    }

    .unaware {
        width: 100%;
        margin-top: 60px;
        padding: 0 30px;
        display: flex;
        flex-direction: column;
        align-items: center;

        button {
            width: 100%;
            height: 70px;
            margin-top: 15px;
            border: 0;
            border-radius: 8px;
            color: #3661c9;
            background-color: #edf3ff;
            letter-spacing: 3px;
        }
    }
}
</style>
